import Router from "./router/index.tsx";
// 两种路由模式，BrowserRouter（history模式），HashRouter(Hash模式)
import { BrowserRouter, } from "react-router-dom";

import { ConfigProvider, theme, ThemeConfig } from "antd";
import zhCN from 'antd/es/locale/zh_CN'; // 中文语言包
import enUS from 'antd/es/locale/en_US';

import { useState } from "react"; // 英文语言包
// antd 从 v4.0 版本开始，
// 默认使用 dayjs 作为日期处理库来替代 moment。
// 不过，ConfigProvider 的 locale 设置并不会自动加载 dayjs 的语言包。
// 因此，虽然 antd 提供的国际化配置能够处理组件的文本和界面语言，
// 但它并不会自动处理 dayjs 的日期格式化问题。
// 所以，为了确保 dayjs 使用正确的语言环境，
// 需要显式引入 dayjs 的语言包，
// 并手动设置 locale。引入 dayjs/locale/zh-cn
// 是确保日期组件完全中文化的正确方法。
import 'dayjs/locale/zh-cn'; //日期组件中文化
import { initGlobalMessage } from "./utils/message.ts";
import { RootState, useAppDispatch } from "./store/index.tsx";
import { useSelector } from "react-redux";

import "./index.css"

function App() {
  const [locale, setLocale] = useState(zhCN); // 默认语言为中文
  const messageContext = initGlobalMessage();// contextHolder: React 节点（需渲染到 DOM 中，用于挂载消息）
  const isDark = useSelector((state: RootState) => state.theme.isDark);
  return <div className={`theme-container ${isDark ? 'dark' : 'light'}`} >
    {messageContext}
    <ConfigProvider locale={locale} theme={{
      algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
      token: {
        // Seed Token，影响范围大
        headerHeight: "30px",

      } as ThemeConfig['token'],

    }}>
      <BrowserRouter future={{
        v7_relativeSplatPath: true,
      }}>
        <Router ></Router>
      </BrowserRouter>
    </ConfigProvider>
  </div>
}

export default App
